//
//  EmojiView.swift
//  imprint
//
//  Created by 小柠檬🍋 on 2025/5/20.
//

import SwiftUI

struct EmojiManagerView: View {
    @StateObject var viewModel = EmojiManagerViewModel()
    @State private var selectId = ""
    
    var body: some View {
        VStack{
            pageView
//            classsifyView
                .frame(maxWidth: .infinity)
                .padding(.vertical, 6)//由于timeView自定义字体顶部间距过大\
        }.onAppear{
            if !viewModel.isInit{
                viewModel.getTab()
                viewModel.isInit = true
            }
        }.onReceive(viewModel.$tableItem) { newValue in
            if newValue.isEmpty == false {
                selectId = newValue[0].id
            }
        }
    }
}

extension EmojiManagerView {
    //标签分类
    var classsifyView: some View {
        ScrollView(.horizontal,showsIndicators: false) {
            VStack(alignment: .leading, spacing: 0){
                //滚动试图（通过HStack监听selectIndex 变化，实现滚动标签）
                ScrollViewReader { value in
                    //横向布局
                    HStack(spacing:0) {
                        ForEach(viewModel.tableItem, id: \.uuid) { item in
                            HStack(spacing: 0) { //间距为0
                                //文本
                                Text(item.name)
                                    .font(.system(size: 14))
                                    .foregroundColor(themeManager.themeColor.opacity(item.id == selectId ? 1 : 0.3))
                                    .padding(.vertical,5)
                                    .padding(.horizontal,8)
                                    .background(themeManager.themeColor.opacity(item.id == selectId ? 0.3 : 0.1))
                                    .cornerRadius(20)
                            }
                            .padding(5)
                            .onTapGesture {
                                withAnimation{
                                    self.selectId = item.id
                                }
                                //                                     withAnimation(Animation.linear(duration: 2)) { //加个动画，标题滚动到中间才不会生硬
                                //                                         value.scrollTo(selectIndex,anchor: .center)
                                //                                     }
                            }
                            
                        }
                    }.padding(.leading,10).padding(.trailing,10) //内部滚动间距
                    //监听试图，让他滚动的时候居中，不支持16
                        .onChange(of: selectId) { newValue in
                            let selectIndex = viewModel.tableItem.firstIndex(where: { $0.id == newValue })
                            withAnimation(Animation.linear(duration: 2)) { //加个动画，标题滚动到中间才不会生硬
                                value.scrollTo(selectIndex,anchor: .center)
                            }
                        }
                }
                //指示器，目前的指示器只能固定大小，应该是需要跟文本一样的宽度才行
                //                     HStack{
                //                         Capsule().fill(Color.red).frame(width: 20,height: 2)
                //                     }.frame(width: 50)
                //                         .offset(x: CGFloat(selectIndex * 50))
                //                         .animation(Animation.linear(duration: 0.2),value: selectIndex)
            }
        }.padding(.trailing,10)
        
    }
}

extension EmojiManagerView{
    private var pageView : some View {
        TabView(selection: $selectId) { //使用selection 就会跟$selectIndex绑定
            ForEach(viewModel.tableItem, id: \.id) { item in
                switch item.id {
                case "0":
                    EmojiPictureView()
                default:
                    EmojiView()
                }
            }
            
        }.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))//使用PageTabViewStyle风格
    }
}


#Preview {
    EmojiManagerView()
}
